<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>QSKJ_LOCAL</title>
    <script type="text/javascript" src="/Public/Build/Cesium/Cesium.js"></script>
    <script src="/Public/js/jquery-3.7.1.min.js"></script>
    <script src="/Public/js/utilsForCesium.js"></script>
    <link rel="stylesheet" href="/Public/Build/Cesium/Widgets/widgets.css">

</head>

<body>
    <div id="cesiumContainer">
        <button id="bt1" style="position: absolute;z-index: 450;">T</button>
    </div>
    <script>


        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MjczNDgzMy1hYzE1LTRjNWYtODZhMS01MjZkNWRiMDc2MmUiLCJpZCI6ODIxMzAsImlhdCI6MTY0NDU0ODc0M30.LpGXXWsbQXucV5MTeC2g8BCAQWiZp612gosWcK-7ocE';

        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrain: Cesium.Terrain.fromWorldTerrain(),
        });

        const hpr = new Cesium.HeadingPitchRoll(0.0, 0.0, 0.0)
        const hpr2 = new Cesium.HeadingPitchRoll(0.9, 0.0, 0.0)
        const m3 = Cesium.Matrix3.fromHeadingPitchRoll(hpr)
        const m4 = Cesium.Matrix4.fromRotation(m3)

        const m5 = Cesium.Matrix4.multiplyByTranslation(
                Cesium.Transforms.headingPitchRollToFixedFrame(
                    Cesium.Cartesian3.fromDegrees(-105.0, 30),
                    hpr,
                ),
                new Cesium.Cartesian3(0.0, 0.0, 0.0),
                new Cesium.Matrix4(),
            )

        const mp1 = new Cesium.Primitive({
            geometryInstances: new Cesium.GeometryInstance({
                geometry: Cesium.BoxGeometry.fromDimensions({
                    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
                    dimensions: new Cesium.Cartesian3(400000.0, 30000.0, 500000.0),
                }),
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                        Cesium.Color.RED.withAlpha(0.5),
                    ),
                },
            }),

            modelMatrix:m5,
            appearance: new Cesium.PerInstanceColorAppearance({
                closed: true,
            }),
        })
        viewer.scene.primitives.add(mp1)

        const hpr_0 = new Cesium.HeadingPitchRoll(0.0, 0.0, 0.0)
        
        $("#bt1").click(function () {
            hpr_0.heading += 0.1;
            var mm = Cesium.Matrix4.multiplyByTranslation(
                Cesium.Transforms.headingPitchRollToFixedFrame(
                    Cesium.Cartesian3.fromDegrees(-105.0, 30),
                    hpr_0,
                ),
                new Cesium.Cartesian3(0.0, 0.0, 0.0),
                new Cesium.Matrix4()
            )
            mp1.modelMatrix = mm;
            console.log(hpr_0)
        })
        // console.log(mp1)



    </script>
    </div>
</body>

</html>